<template>
  <div>
    <!--头部信息-->
    <el-row class="header" type="flex">
      <el-col :span="12" :offset="3">
        <el-link href="#/index" :underline="false" icon="el-icon-house">首页</el-link>
      </el-col>
      <!--if-->
      <el-col :span="12" :offset="14" v-if="indexData.userToken===''">
        <el-link href="#/login" :underline="false">登录</el-link>
        |
        <el-link href="#/sign" :underline="false">注册</el-link>
      </el-col>
      <!--else-->
      <el-col :span="12" :offset="14" v-else>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ indexData.userToken.username }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item v-if="indexData.userToken.rid==='1'">
              <el-link href="#/admin" :underline="false">后台管理</el-link>
            </el-dropdown-item>
            <el-dropdown-item v-if="indexData.userToken.rid==='2'">
              <el-link href="#/admin" :underline="false">店铺管理</el-link>
            </el-dropdown-item>
            <el-dropdown-item v-if="indexData.userToken.rid==='3'">
              <el-link @click="shop.shopDialog=true" :underline="false">商家入驻</el-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-link @click="loginOutBox" :underline="false">退出登录</el-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <!--Logo与搜索-->
    <el-row class="header_container" type="flex">
      <el-col :span="12" :offset="1">
        <a href="#/index" title="试剂耗材采购管理平台">
          <el-image class="image" :src="indexData.logoUrl"></el-image>
        </a>
      </el-col>
      <el-col :span="12" :offset="9">
        <el-input v-show="false"
                  type="text"
                  style="width: 300px"
                  prefix-icon="el-icon-search"
                  placeholder="请输入商家名称"
                  v-model="indexData.searchInfo"></el-input>
        <el-button v-show="false" type="success" @click="searchEvent">查询</el-button>
      </el-col>
    </el-row>
    <hr>
    <!--主体内容-->
    <div class="sign_container">
      <div class="images">
        <el-image :src="backimage" fit="none"></el-image>
      </div>
      <div class="sign_box">
        <div class="title">
          试剂采购平台注册
        </div>
        <div class="sign_form">
          <el-form status-icon :model="signFrom" ref="signFrom" :rules="signFromRules">
            <el-form-item class="sign_item" prop="username">
              <el-input type="text"
                        prefix-icon="el-icon-user"
                        placeholder="用户名"
                        v-model="signFrom.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password"
                        prefix-icon="el-icon-lock"
                        placeholder="密码"
                        v-model="signFrom.password"></el-input>
            </el-form-item>
            <el-form-item prop="compassword">
              <el-input type="password"
                        prefix-icon="el-icon-lock"
                        placeholder="确认密码"
                        v-model="signFrom.compassword"></el-input>
            </el-form-item>
          </el-form>
          <el-button class="sign_bth" type="success" @click="signEvent()">立即注册</el-button>
          <div class="sign_sgin">
          <span class="sign_text">已有帐户?
            <el-link class="sign_link" type="primary" href="#/login">
              立即登录
            </el-link>
          </span>
          </div>
        </div>
      </div>
    </div>
    <!--页脚-->
    <div class="footer">
      <div class="footer_text">
        <el-link>关于我们</el-link>
        |
        <el-link>合作伙伴</el-link>
        |
        <el-link>广告服务</el-link>
        |
        <el-link>广告服务</el-link>
        |
        <el-link>联系我们</el-link>
        |
        <el-link>法律声明</el-link>
      </div>
      <div class="footer_banquan">
        © 2020-现在 Reagent.com 版权所有
      </div>
    </div>
  </div>
</template>

<script>
import backimage from '@/assets/images/logo/logo2.png'
import logo from '@/assets/images/logo/logo1.png'

export default {
  name: 'sign',
  data () {
    var checkPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.signFrom.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      //主页数据
      indexData: {
        logoUrl: logo,
        isLogin: true,
        userToken: ''
      },
      signFrom: {
        username: '',
        password: '',
        compassword: ''
      },
      signFromRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 15,
            message: '用户名在3~15个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '密码在6~15个字符',
            trigger: 'blur'
          }
        ],
        compassword: [
          {
            validator: checkPass,
            trigger: 'blur'
          }
        ]
      },
      backimage: backimage
    }
  },
  created () {
    this.getToken()
  },
  methods: {
    /*公共*/
    // 获取Token
    async getToken () {
      if (sessionStorage.getItem('token') !== '') {
        const { data: res } = await axios.get('/getToken')
        this.indexData.userToken = res.data
      } else {
        this.$message.error(res.data.message)
        return false
      }
    },
    // 退出登录
    loginOutBox () {
      this.$confirm('确定退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.commit('delToken')
        this.indexData.userToken = ''
        this.$message.success('退出成功!')
        this.$router.push('/index')
      }).catch(() => {
        return false
      })
    },
    /*非公共*/
    // 注册
    signEvent () {
      this.$refs['signFrom'].validate((valid) => {
        if (!valid) return
        //发送请求
        axios.post('/signInfo', {
          username: this.signFrom.username,
          password: this.signFrom.password
        }).then((res) => {
          if (res.data.status === 200) {
            this.$message.success(res.data.message)
            this.$router.push('/login')
          } else {
            this.$message.error(res.data.message)
          }
        }).catch((err) => {
          this.$message.error('服务器未连接')
        })
      })
    },

    // 查询事件
    searchEvent () {
      if (this.indexData.searchInfo === '') {
        this.$message({
          type: 'info',
          message: '请输入要查询的内容!',
          duration: 1000
        })
      } else {
        this.$message({
          type: 'info',
          message: '正在查询...',
          duration: 1000
        })
      }
    }
  }
}
</script>

<style scoped>
@import '../assets/css/sign.css';
@import "../assets/css/index.css";
</style>
